<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="fa fa-dashboard"></i> 首页</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content user-symbol">
                    <el-row>
                        <el-col :span="6">
                            <div class="grid-content user-symbol-icon">
                                    <i class="fa fa-users"></i>
                            </div>
                        </el-col>
                        <el-col :span="18"
                        v-loading="user.all_loading"
                        >
                            <div class="grid-content user-symbol-content">
                                    <a href="javascript:void(0)">
                                        <h1  v-text="user.all"></h1>
                                    </a>
                                    <p>总用户数</p>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content user-symbol">
                    <el-row>
                        <el-col :span="6">
                            <div class="grid-content user-symbol-icon">
                                <i class="fa fa-user"></i>
                            </div>
                        </el-col>
                        <el-col :span="18"
                        v-loading="user.yesterday_loading"
                        >
                            <div class="grid-content user-symbol-content">
                                <a href="javascript:void(0)">
                                    <h1  v-text="user.yesterday"></h1>
                                </a>
                                <p>昨日新增</p>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>

            <el-col :span="6">
                <div class="grid-content user-symbol">
                    <el-row>
                        <el-col :span="6">
                            <div class="grid-content user-symbol-icon">
                                <i class="fa fa-yen"></i>
                            </div>
                        </el-col>
                        <el-col :span="18"
                        v-loading="amount.charge_loadging"
                        >
                            <div class="grid-content user-symbol-content">
                                <a href="javascript:void(0)">
                                    <h1 v-text="amount.charge"></h1>
                                </a>
                                <p>昨日充值</p>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content user-symbol">
                    <el-row>
                        <el-col :span="6">
                            <div class="grid-content user-symbol-icon">
                                <i class="fa fa-yen"></i>
                            </div>
                        </el-col>
                        <el-col :span="18"
                        v-loading="amount.cost_loading"
                        >
                            <div class="grid-content user-symbol-content">
                                <a href="javascript:void(0)">
                                    <h1 v-text="amount.cost"></h1>
                                </a>
                                <p>昨日消费</p>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <el-row class="user-mt10" type="flex" justify="center">
            <el-col :span="8">
                <el-button-group>
                    <el-button type="default" @click="checkType('day')" autofocus>昨日</el-button>
                    <el-button type="default" @click="checkType('week')">上周</el-button>
                    <el-button type="default" @click="checkType('month')">本月</el-button>
                    <el-button type="default" @click="checkType('year')">今年</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-row class="user-mt10" type="flex" justify="center">
            <el-col :span="18" v-loading="user.chart_loading">
                <chart :options="options"></chart>
            </el-col>
            <el-col :span="18" v-loading="amount.chart_loading">
                <chart :options="options1"></chart>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import chart from 'vue-echarts';
    let options = {
        backgroundColor:'#FFFFFF',
        title: {
            text: '新增用户走势图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:'同比'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: 0,
            data: []
        },
        yAxis: {
            type: 'value',
            name: '人数',
            min: 0,
        },
        series: [
            {
                name:'人数',
                type:'line',
                stack: '总量',
                data:[]
            }
        ]
    };
    let options1 = {
        backgroundColor:'#FFFFFF',
        title: {
            text: '收支走势图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['充值','消费']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: 0,
            data: []
        },
        yAxis: {
            type: 'value',
            name: '￥(CNY)',
            min: 0,
        },
        series: [
            {
                name:'充值',
                type:'line',
                data:[]
            },
            {
                name:'消费',
                type:'line',
                data:[]
            }
        ]
    };

    export default {
        components: {
            chart
        },
        data: () => ({
            date_type:'day',
            options:options,
            options1:options,
            user:{
                all_loading:true,
                all:0,
                yesterday_loading:true,
                yesterday:0,
                chart_loading:true
            },
            amount:{
                charge_loadging:true,
                charge:0,
                cost_loading:true,
                cost:0,
                chart_loading:true
            }
        }),
        created(){
            this.init();
        },
        methods:{
            init(){
                const self=this;
                self.$axios.get(self.$baseUrl+'/dashboard/user').then((res)=>{
                    self.user.all_loading=false;
                    if(res.data.code===1){
                        self.user.all = res.data.data.count;
                    }
                })
                self.$axios.get(self.$baseUrl+'/dashboard/user?type=yesterday').then((res)=>{
                    self.user.yesterday_loading=false;
                    if(res.data.code===1){
                        self.user.yesterday = res.data.data.count;
                    }
                })
                self.$axios.get(self.$baseUrl+'/dashboard/account?type=charge&day_type=yesterday').then((res)=>{
                    self.amount.charge_loadging=false;
                    if(res.data.code===1){
                        self.amount.charge = res.data.data.count;
                    }
                })
                self.$axios.get(self.$baseUrl+'/dashboard/account?type=cost&day_type=yesterday').then((res)=>{
                    self.amount.cost_loading=false;
                    if(res.data.code===1){
                        self.amount.cost = res.data.data.count;
                    }
                })
                //表格
                let _options = options;
                this.date_type = 'day';
                this.user_chart();
                this.account_chart();
            },
            user_chart(){
                self = this;
                let type = this.date_type
                let _options = options
                self.$axios.get(self.$baseUrl+'/dashboard/chart-user?type='+type).then((res)=>{
                    self.user.chart_loading = false;
                    if(res.data.code===1){
                        _options.xAxis = res.data.data.xAxis;
                        _options.series[0].data = res.data.data.datas;
                        self.options = _options
                    }
                });
            },
            account_chart(){
                self = this;
                let type = this.date_type
                let _options = options1
                self.$axios.get(self.$baseUrl+'/dashboard/chart-account?type='+type).then((res)=>{
                    self.amount.chart_loading = false;
                    if(res.data.code===1){
                        _options.xAxis = res.data.data.xAxis;
                        _options.series[0].data = res.data.data.datas[0];
                        _options.series[1].data = res.data.data.datas[1];
                        self.options1 = _options
                        console.log(self.options1);
                    }
                });
            },
            checkType(type){
                this.date_type = type;
                self.user.chart_loading = true;
                self.amount.chart_loading = true;
                this.account_chart(type);
                this.user_chart(type);
            }
        }
    }
</script>

<style scoped>
    .schart{
        width: 600px;
        display: inline-block;
    }
    .content-title{
        clear: both;
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }

</style>